<template>
  <p>
    <a-space>
      <a-button type="primary" @click="handleQuery()">刷新</a-button>
      <a-button type="primary" @click="onAdd">新增</a-button>
    </a-space>
  </p>
  <!--pagination用于设置分页参数，@change指向点击事件,loading表示等待，可以防止用户不断点击提交-->
  <a-table :dataSource="passengers"
           :columns="columns"
           :pagination="pagination"
           @change="handleTableChange"
           :loading="loading">
    <!--增加额外的列时的方法，自带两个参数，column代表是哪一列，record代表的是哪一行
        这里是渲染出来全新的自定义的一列，这一列的每一行都是一个编辑按钮-->
    <template #bodyCell="{ column, record }">
      <!--如果列的名字是operation，应该与下方的js中定义的一样-->
      <template v-if="column.dataIndex === 'operation'">
        <a-space>
          <a @click="onEdit(record)">编辑</a>
          <!--包了一层弹出框-->
          <a-popconfirm
            title="删除后不可恢复，确认删除？"
            @confirm="onDelete(record)"
            ok-text="确认"
            cancel-text="取消">
            <a style="color: red">删除</a>
          </a-popconfirm>
        </a-space>
      </template>
      <!--用来写自定义的东西，同时将column.dataIndex指定为列名-->
      <template v-else-if="column.dataIndex === 'type'">
        <!--for循环匹配value-->
        <span v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code">
          <span v-if="item.code === record.type">
            {{item.desc}}
          </span>
        </span>
      </template>
    </template>
  </a-table>
  <!--这里的v-model指的就是是否可见，只有为true时才可见-->
  <a-modal v-model:visible="visible" title="乘车人" @ok="handleOk" ok-text="确认" cancel-text="取消">
    <a-form :model="passenger" :label-col="{span:4}" :wrapper-col="{span:20}">
      <a-form-item label="姓名">
        <a-input v-model:value="passenger.name" />
      </a-form-item>
      <a-form-item label="身份证">
        <a-input v-model:value="passenger.idCard" />
      </a-form-item>
      <a-form-item label="旅客类型">
        <a-select v-model:value="passenger.type">
          <a-select-option v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code" :value="item.code">{{item.desc}}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {defineComponent, ref, onMounted} from "vue";
import axios from "axios";
import {notification} from "ant-design-vue";

export default defineComponent({
  name: "passenger-view",
  setup() {
    // 用于定义常量类
    const PASSENGER_TYPE_ARRAY = window.PASSENGER_TYPE_ARRAY;
    // 用于定义modal是否展示
    const visible = ref(false);
    const onAdd = () => {
      // 新增时将输入窗格置空
      passenger.value = {};
      visible.value = true;
    };
    const onEdit = (record) => {
      // passenger.value = record相当于是将record的指针赋给了passenger，所以passenger改变的时候record会跟着变。
      // copy一个新对象，就和原来的record对象没什么区别了。
      passenger.value = window.Tool.copy(record);
      visible.value = true;
    }
    const onDelete = (record) => {
      axios.delete("train-member/passenger/delete/" + record.id).then(response => {
        const data = response.data;
        if (data.success) {
          notification.success({description: "删除成功！"});
          handleQuery({
            pageNo: pagination.value.current,
            pageSize: pagination.value.pageSize,
          })
        } else {
          notification.error({description: data.message});
        }
      });
    };
    const handleOk = () => {
      axios.post("/train-member/passenger/save", passenger.value).then(response => {
        let data = response.data;
        if (data.success) {
          notification.success({description: "保存成功！"});
          visible.value = false;
          handleQuery({
            pageNo: pagination.value.current,
            pageSize: pagination.value.pageSize,
          })
        } else {
          notification.error({description: data.message});
        }
      });
    }

    // 用于定义乘车人passenger这个响应式变量
    let passenger = ref({
      id: undefined,
      memberId: undefined,
      name: undefined,
      idCard: undefined,
      type: undefined,
      createTime: undefined,
      UpdateTime: undefined,
    });

    // 用于定义passengers
    // 如果用reactive，不能直接复制，因为直接赋值会使响应式失效，有两种方法可以解决：
    // 方法一：用其push方法等数组方法，但push前需要清空
    // 方法二：用reactive声明一个对象，然后对象里有一个属性是list
    const passengers = ref([]);

    // 用于定义展示的列
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
      },
      {
        title: '身份证',
        dataIndex: 'idCard',
        key: 'idCard',
      },
      {
        title: '操作',
        dataIndex: 'operation'
      }
    ]

    // 分页的三个属性名是固定的(组件要求)
    const pagination = ref({
      // 列表总数
      total: 0,
      // 当前页数
      current: 1,
      // 每页条数
      pageSize: 2,
    });

    let loading = ref(false);

    const handleQuery = param => {
      if (!param) {
        param = {
          pageNo: 1,
          pageSize: pagination.value.pageSize,
        };
      }
      // 在与后端做交互之前，将loading设为true
      loading.value = true;
      axios.get("/train-member/passenger/query-list", {
        params: {
          pageNo: param.pageNo,
          pageSize: param.pageSize,
        }
      }).then(response => {
        // 与后端交互完成之后，可以关闭loading状态
        // 在结束的一开始就关闭loading状态，不应该放在success或者失败的代码块里
        loading.value = false;
        let data = response.data;
        if (data.success) {
          passengers.value = data.content.list;
          pagination.value.total = data.content.total;
          // 设置分页组件的值（点第几页就在页面上激活第几页的激活样式）
          pagination.value.current = param.pageNo;
        } else {
          notification.error({description: data.message})
        }
      });
    }

    const handleTableChange = pagination => {
      // console.log("自带的分页参数为：{}", pagination);
      handleQuery({
        pageNo: pagination.current,
        pageSize: pagination.pageSize,
      })
    }

    // 钩子函数，页面渲染好之后执行
    onMounted(() => {
      handleQuery({
        pageNo: 1,
        pageSize: pagination.value.pageSize,
      })
    })

    return {
      PASSENGER_TYPE_ARRAY,
      visible,
      onAdd,
      handleOk,
      passenger,
      passengers,
      columns,
      pagination,
      handleTableChange,
      handleQuery,
      loading,
      onEdit,
      onDelete,
    };
  },
});
</script>

<style>

</style>